<template>
    <div class="m-0 p-0 lin" :id="editorId+'-container'" style="line-height: normal !important;">
        <div :id="editorId" v-html="content"></div>
        <el-dialog
            v-if="uploadTask"
            :title="uploadTask.file.name"
            :visible.sync="uploadHasTask"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :show-close="false"
            width="50%">
            <div class="d-flex">
                <div class="flex-grow-1">
                    <el-progress :text-inside="true" :stroke-width="26" :percentage="uploadTask.chunksCompletedPercent" >
                    </el-progress>
                </div>
                <div>
                    <i v-if="!uploadTask.uploadCompleted" class="el-icon-circle-close"
                       style="cursor: pointer;font-size: 28px" @click="uploadTask.remove()"></i>
                </div>
            </div>

        </el-dialog>
    </div>
</template>

<script>
import LeUtils from 'laravel-extend-assents/src/js/services/le-utils'
import {Uploader} from 'js-utils';

import "quill/dist/quill.snow.css";
import Quill from "quill/core";
import Toolbar from "quill/modules/toolbar";
import Snow from "quill/themes/snow";

import Header from "quill/formats/header";
import Indent from "quill/formats/indent";

import Bold from "quill/formats/bold";
import Italic from "quill/formats/italic";
import Underline from "quill/formats/underline";
import Strike from "quill/formats/strike";

import List from "quill/formats/list";
import Script from "quill/formats/script";
//import { DirectionAttribute } from "quill/formats/direction";
import {SizeStyle} from "quill/formats/size";

SizeStyle.whitelist = ['0.5rem', '0.75rem', '1rem', '1.25rem', '1.5rem', '1.75rem', '2rem', '2.5rem', '3rem'];
import Blockquote from "quill/formats/blockquote";
import Code from "quill/formats/code";
import {ColorStyle} from "quill/formats/color";
import {BackgroundStyle} from "quill/formats/background";

import Image from "quill/formats/image";
import Video from "quill/formats/video";

Quill.register({
    "modules/toolbar": Toolbar,
    "themes/snow": Snow,

    "formats/header": Header,
    "formats/indent": Indent,

    "formats/bold": Bold,
    "formats/italic": Italic,
    "formats/underline": Underline,
    "formats/strike": Strike,

    "formats/list": List,
    "formats/script": Script,
    "formats/size": SizeStyle,

    //"formats/direction": DirectionAttribute,

    "formats/blockquote": Blockquote,
    "formats/code-block": Code,
    "formats/color": ColorStyle,
    "formats/background": BackgroundStyle,

    'formats/image': Image,
    'formats/video': Video,
},true);

const toolbarOptions = [
    [{'header': [1, 2, 3, 4, 5, 6, false]}],

    [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
    [{'size': [false, '0.5rem', '0.75rem', '1rem', '1.25rem', '1.5rem', '1.75rem', '2rem', '2.5rem', '3rem']}],
    ['bold', 'italic', 'underline', 'strike'],        // toggled buttons

    [{'list': 'ordered'}, {'list': 'bullet'}, {'list': 'check'}],

    ['blockquote', 'code-block', {'script': 'sub'}, {'script': 'super'}],

    //[{ 'direction': 'rtl' }],                         // text direction

    ['link', 'formula', 'image', 'video'],

    [{'color': []}, {'background': []}],          // dropdown with defaults from them

    ['clean']                                         // remove formatting button
];


const uploader = new Uploader("", true)
//设置上传线程
uploader.setLimitMaxThreads(5)


export default {
    components: {},
    props: {
        value: {
            type: String,
            default: '',
        },
        generateTokenCallback: {
            type: Function,
            default: () => {
                return Promise.reject(new Error("token回调必传"))
            }
        },
        disabled: { //不可编辑
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            editorId: 'quill-' + LeUtils.randomString(32),
            content: '',
            quill:null,
            uploadTask:null,
        }
    },
    computed: {

        uploadHasTask: function () {
            return !!this.uploadTask
        }
    },
    created() {
        let _this = this;
        _this.content = _this.value;


        //设置错误信息显示回调
        uploader.setEventOnError(function (err) {
            _this.$message.error(err.message)
        })

        uploader.setEventOnFileQueueChange(function (queue, changedIndex) {
            _this.uploadTask = LeUtils.valueGet(queue,'0',null)

        })
    },
    mounted() {
        let _this = this;

        _this.quill = new Quill("#" + _this.editorId, {
            theme: "snow",
            bounds: "#" + _this.editorId + '-container',
            readOnly: _this.disabled,
            modules: {
                toolbar: toolbarOptions
            },
        });

        _this.quill.on('editor-change', (eventName, ...args) => {
            //console.log(_this.quill.getSemanticHTML())
            _this.$emit('change', _this.quill.getSemanticHTML())
        });

        const toolbar = _this.quill.getModule('toolbar');

        toolbar.addHandler('image', _this.selectFileToUploader('image'));
        toolbar.addHandler('video', _this.selectFileToUploader('video'));

    },
    methods: {
        selectFileToUploader: function (emType) {
            let _this = this;


            return function (){
                uploader.setEventOnUploadFinished(_this.uploadFinishedEnevt(emType))

                _this.generateTokenCallback().then(function (res_data) {

                    let serviceUrl = LeUtils.valueGet(res_data, "data.service_url")
                    uploader.setServerUrl(serviceUrl)
                    let maxSize = LeUtils.valueGet(res_data, "data.max_size", 0)
                    if (maxSize > 0) {
                        uploader.setFileLimitMaxSize(maxSize)
                    }
                    let maxChunkSize = LeUtils.valueGet(res_data, "data.max_chunk_size", 0)
                    if (maxChunkSize > 0) {
                        uploader.setChunkSize(maxChunkSize)
                    }
                    uploader.setFileLimitAllowExt(LeUtils.valueGet(res_data, "data.allow_ext", []))

                    uploader.selectFile(false, true)

                }).catch(function (err) {
                    _this.$message.error(err.message)
                })
            }
        },
        uploadFinishedEnevt : function (embedType){
            let _this = this;
            return function (urls) {
                _this.uploadTask = null

                if(!_this.quill){
                    return
                }

                let url = ""
                if(LeUtils.typeIs('array',urls) && urls.length > 0){
                    url = urls[0]
                }
                if(!!url){
                    let range = _this.quill.getSelection();
                    let rangeIndex = 0 + (range !== null ? range.index : 0)

                    switch (embedType){
                        case "image":
                            _this.quill.insertEmbed(rangeIndex, 'image', url);
                            break
                        case "video":

                            _this.quill.insertEmbed(rangeIndex, 'video', url);
                            break
                    }
                    _this.quill.setSelection(1 + rangeIndex)
                }
            }
        }
    }
}
</script>

